<template>
  <a-carousel arrows  autoplay>
    <div slot="prevArrow"  class="custom-slick-arrow"  style="left: 10px;zIndex: 1">
      <a-icon type="left-circle" />
    </div>
    <div slot="nextArrow"  class="custom-slick-arrow" style="right: 10px">
      <a-icon type="right-circle" />
    </div>
    <div v-for="item in list" :key="item.id" class="images">
      <h3 :style="{'background-image': `url(${item.imgUrlPc})`}"></h3>
    </div>
  </a-carousel>
</template>

<script>
import {getSwiper} from "@/api/api";

export default {
  name: "Swiper",
  data(){
    return {
      list:[]
    }
  },
  created() {
    getSwiper().then(res=>this.list=res.data)
  }

}
</script>

<style scoped>
/* For demo */
.ant-carousel .slick-slide {
  text-align: center;
  height: 400px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.8;
}
.slick-slide .slick-current .slick-active {
  height: 400px;
}
.ant-carousel >>> .slick-slide h3{
  width: 100%;
  height: 400px;
  /*background-image: url("../assets/images/iu03.jpg");*/
  background-size: auto 100%;
  background-position: -1000px  0;
}
.images {
  height: 400px;
}
</style>